<script setup>
import { stockQuery, getStockName } from '@/api/dataQuery.js'

const showDialog = ref(false)
const tableRef = ref()
const open = () => {
  showDialog.value = true
}
const tableData = ref([])

const tableColumn = ref([
  { label: '产品编号', prop: 'ProdID', minWidth: 100 },
  { label: '产品名称', prop: 'ProdName' },
  { label: '产品规格', prop: 'ProdSize', minWidth: 200 },
  { label: '库存', prop: 'Quantity', minWidth: 60 },
  { label: '库存', prop: 'Quantity', minWidth: 60 },
  { label: '所在仓', prop: 'WareHouseName' },
  { label: '储位', prop: 'cw' },
  { label: '库存上限', prop: 'kcsx', minWidth: 60 },
  { label: '库存下限', prop: 'kcxs', minWidth: 60 },
  { label: '安全库存', prop: 'safestock' },
  { label: '建议售价', prop: 'suggestprice' }
])

defineExpose({
  open
})

const emits = defineEmits(['select'])

const loadData = async () => {
  const { data } = await stockQuery({})
  tableData.value = data
}
const rowKey = row => row.ProdID

const retrieve = () => {
  const data = tableRef.value.$el.getSelectionRows()
  console.log(data)
  emits('select', data)
}
</script>

<template>
  <el-dialog v-model="showDialog" title="选择产品" @open="loadData">
    <el-row>
      <el-col :span="6"></el-col>
      <el-col :span="18">
        <ps-table
          :data="tableData"
          :tableColumn="tableColumn"
          size="small"
          height="300"
          ref="tableRef"
          :row-key="rowKey"
        >
          <template #header>
            <el-table-column type="selection" width="55" reserve-selection fixed />
          </template>
        </ps-table>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="retrieve">确定</el-button>
      <el-button>取消</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
